<template>
<div class="goods-box">
<head1></head1>
<el-row class="goods-message"><el-divider><span><i class="el-icon-shopping-cart-2"></i>&nbsp;&nbsp;商品详情</span></el-divider></el-row>
  <el-row justify="center" type="flex">
    <el-col :span="19">
      <div class="goods">
        <el-row class="goods-su">
          <el-col :span="8"><img :src="shoes_img" class="img1"></el-col>
          <el-col :offset="3" :span="12">
            <h2>{{name}}</h2>
            <div class="member">
              <el-row type="flex" justify="center" class="price">
                <el-col :span="4"><span class="discount">官方折扣价：</span></el-col>
                <el-col class="money" :span="18">
                  ￥<b>{{price}}</b>
                  <p>该商品未参与打折活动</p>
                </el-col>
              </el-row>
              <el-row class="account" type="flex" justify="start" align="middle">
                <el-col :span="3" :offset="2"><label>累计评价：</label><span>{{commentnum}}</span></el-col>
                <el-col :span="1"><el-divider direction="vertical"></el-divider></el-col>
                <el-col :span="3"><label>累计售出：</label><span>{{sale}}</span></el-col>
                <el-col :span="2"><el-divider direction="vertical"></el-divider></el-col>
              </el-row>
              <el-row class="proinfo">
                <el-col :span="5" :offset="1"><span>促销信息：</span></el-col>
              </el-row>
            </div>
            <el-row class="selectcolor">
              <el-col :offset="1">
                <span>颜色：</span>
              </el-col>
              <el-col>
                <div class="color1"></div>
              </el-col>
              <el-col>
                <div class="color2"></div>
              </el-col>
              <el-col>
                <div class="color3"></div>
              </el-col>
            </el-row>
            <el-row class="size">
              <el-col :span="2" :offset="1"><span>尺码：</span></el-col>
              <el-col :span="18" :offset="1">
                <el-radio-group v-model="radio">
                  <el-radio :label="1">39码</el-radio>
                  <el-radio :label="2">40码</el-radio>
                  <el-radio :label="3">41码</el-radio>
                  <el-radio :label="4">42码</el-radio>
                  <el-radio :label="5">43码</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row class="num">
              <el-col :span="3" :offset="1"><span>我要买：</span></el-col>
              <el-col :span="10"><el-input-number size="small" v-model="num" :min="1" :max="5" label="描述文字"></el-input-number><span>&nbsp;&nbsp;件</span></el-col>
            </el-row>
            <el-row class="buy-btn">
              <el-col :span="6">
              <el-button type="danger" icon="el-icon-shopping-cart-full" @click="addShopcar">加入购物车</el-button>
              </el-col>
              <el-col :span="6" :offset="6">
                <el-button type="primary" @click="buynow">立即购买</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-row type="flex" justify="center" class="content">
        <el-col>
          <el-tabs type="border-card">
            <el-tab-pane label="商品评论">暂无评论</el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <footer1></footer1>
</div>
</template>
<script>
import head1 from '@/components/head'
import footer1 from '@/components/footer'
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      action: {
        selectgoods: 'shoes_Web_exploded/Shoes/selectShoesById',
        addshopcars: 'shoes_Web_exploded/Shopcar/addShopcar'
      },
      userId: '',
      num: 1,
      radio: 1,
      id: 1,
      name: '【氢风·特步云】特步 专柜款 男子跑鞋 19新款透气一体织袜套运动鞋981319110772 ',
      price: 379.00,
      sale: 61,
      commentnum: 0,
      shoes_id: '',
      shoes_img: '',
      img1: [require('@/assets/img/goods/goods1.1.jpg'),
        require('@/assets/img/goods/goods1.2.jpg'),
        require('@/assets/img/goods/goods1.3.jpg'),
        require('@/assets/img/goods/goods1.4.jpg'),
        require('@/assets/img/goods/goods1.5.jpg')]
    }
  },
  components: {
    head1,
    footer1
  },
  computed: {

  },
  methods: {
    getshoesId () {
      this.shoes_id = sessionStorage.getItem('shoes_id')
      this.userId = sessionStorage.getItem('user_id')
    },
    getgoods () {
      http.xhrPost(this, this.action.selectgoods + '/' + this.shoes_id, null, (res) => {
        this.name = res.data.shoes_name
        this.price = res.data.price
        this.shoes_img = res.data.shoes_img
      })
    },
    addShopcar () {
      const params = {
        'shoes_num': this.num,
        'user_id': this.userId,
        'shoes_id': this.shoes_id
      }
      http.xhrPost(this, this.action.addshopcars, params, (res) => {
        this.$message({
          type: 'success',
          message: res.message
        })
      })
    },
    buynow () {
      sessionStorage.setItem('shoes_num', this.num)
      sessionStorage.setItem('shoes_id', this.shoes_id)
      sessionStorage.setItem('radio', this.radio)
      sessionStorage.setItem('shoes_img', this.shoes_img)
      sessionStorage.setItem('shoes_name', this.name)
      sessionStorage.setItem('price', this.price)
      this.$router.push('/conforder')
    }
  },
  mounted () {
    this.getshoesId()
    this.getgoods()
  }
}
</script>

<style lang="scss">
@import '../assets/style/common.scss';
.goods-box {
  background: #f4f4f4;
  .el-divider__text {
      position: absolute;
      background-color: #f4f4f4;
      padding: 0 20px;
      color: #303133;
  }
  .goods-message {
    margin-top: 20px;
    i {
      font-size: 24px;
    }
    span {
      font-size: 24px;
      color: $red;
    }
  }
  .content {
    margin-bottom: 30px;
  }
  .goods {
    margin-top: 30px;
    margin-bottom: 40px;
    background-color: #fff;
    width: 100%;
    height: 500px;
    .img1 {
      margin: 20px 0px 0px 20px;
      border: 1px solid #e5e5e5;
      height: 100%;
      width: 100%;
    }
    ul {
      margin: 20px 0px 0px 40px;
      li {
        border: 2px solid #e5e5e5;
        width: 70px;
        height: 70px;
        margin-top: 9px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    h2 {
      color: #545454;
      font-size: 22px;
      font-weight: normal;
      line-height: 30px;
      white-space: normal;
      margin: 20px 0px 20px 0px;
    }
    .member {
      background-color: #f7f7f7;
      .price {
        border-bottom: 1px dashed #e4e4e4;
      .discount {
        width: auto;
        color: #444444;
        font-size: 14px;
        line-height: 37px;
        vertical-align: middle;
      }
      .money {
        color: #c40000;
        line-height: 37px;
        vertical-align: middle;
        b {
          font-size: 28px;
        }
        p {
          color: #000;
          font-size: 14px;
          font-weight: normal;
          span {
            background: #df2d39;
            color: #fff;
            width: 34px;
          }
        }
      }
    }
    .account {
      height: 41px;
      border-bottom: 1px dashed #e4e4e4;
      span {
      font-size: 14px;
      font-weight: bold;
      color: #aa0108;
      }
      label {
        color: #999;
        font-size: 10px;
      }
    }
    .proinfo {
      span {
        color: #444444;
        font-size: 14px;
        line-height: 35px;
        vertical-align: middle;
      }
    }
    margin-bottom: 10px;
    }
    .selectcolor {
      margin-bottom: 10px;
      line-height: 36px;
      vertical-align: middle;
      span {
        color: #444444;
        font-size: 14px;
      }
      div {
        width: 42px;
        height: 36px;
        .color1 {
          border-radius: 4px;
          background-color: red;
          margin-left: 20px;
          border: 2px solid #e5e5e5;
          cursor: pointer;
        }
        .color2 {
          background-color: blue;
          margin-left: 40px;
          border: 2px solid #e5e5e5;
          border-radius: 4px;
          cursor: pointer;
        }
        .color3 {
          border-radius: 4px;
          background-color: black;
          margin-left: 60px;
          border: 2px solid #e5e5e5;
          cursor: pointer;
        }
      }
    }
    .size {
      span {
        color: #444444;
        font-size: 14px;
        line-height: 32px;
      }
    }
    .num {
      margin-bottom: 5px;
      span {
        color: #444444;
        font-size: 14px;
        line-height: 32px;
      }
    }
  }
}
</style>
